<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LT-IM WebSocket 测试工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .content {
            padding: 25px;
        }

        .section {
            margin-bottom: 25px;
        }

        .section-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #667eea;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-right: 10px;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        button:active {
            transform: translateY(0);
        }

        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .status {
            padding: 10px 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .status.connected {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status.disconnected {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        #messages {
            height: 400px;
            overflow-y: auto;
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: #f9f9f9;
        }

        .message {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 6px;
            word-wrap: break-word;
        }

        .message.send {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
        }

        .message.receive {
            background: #f3e5f5;
            border-left: 4px solid #9c27b0;
        }

        .message.system {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
        }

        .message-time {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }

        .message-content {
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 LT-IM WebSocket 测试工具</h1>
            <p>基于 Spring Boot + Netty 的即时通讯系统</p>
        </div>

        <div class="content">
            <!-- 连接状态 -->
            <div id="status" class="status disconnected">
                ❌ 未连接
            </div>

            <!-- 连接配置 -->
            <div class="section">
                <div class="section-title">连接配置</div>
                <div class="form-group">
                    <label>WebSocket 地址:</label>
                    <input type="text" id="wsUrl" value="ws://localhost:9000/ws">
                </div>
                <div class="form-group">
                    <label>登录 Token:</label>
                    <input type="text" id="token" placeholder="请先调用登录接口获取 token">
                </div>
                <button onclick="connect()">连接</button>
                <button onclick="disconnect()">断开</button>
            </div>

            <!-- 发送消息 -->
            <div class="section">
                <div class="section-title">发送消息</div>
                <div class="form-group">
                    <label>消息类型:</label>
                    <select id="msgType">
                        <option value="1">登录认证</option>
                        <option value="2">单聊消息</option>
                        <option value="3">群聊消息</option>
                        <option value="4">心跳</option>
                        <option value="5">已读回执</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>发送者ID:</label>
                    <input type="number" id="senderId" value="1">
                </div>
                <div class="form-group">
                    <label>接收者ID (单聊):</label>
                    <input type="number" id="receiverId" value="2">
                </div>
                <div class="form-group">
                    <label>群组ID (群聊):</label>
                    <input type="number" id="groupId" value="100">
                </div>
                <div class="form-group">
                    <label>消息内容:</label>
                    <textarea id="content" rows="3" placeholder="请输入消息内容..."></textarea>
                </div>
                <button onclick="sendMessage()">发送消息</button>
                <button onclick="sendHeartbeat()">发送心跳</button>
                <button onclick="clearMessages()">清空消息</button>
            </div>

            <!-- 消息列表 -->
            <div class="section">
                <div class="section-title">消息记录</div>
                <div id="messages"></div>
            </div>
        </div>
    </div>

    <script>
        let ws = null;

        // 连接 WebSocket
        function connect() {
            const wsUrl = document.getElementById('wsUrl').value;
            const token = document.getElementById('token').value;

            if (!token) {
                alert('请先输入 token！');
                return;
            }

            try {
                ws = new WebSocket(wsUrl);

                ws.onopen = function() {
                    updateStatus(true);
                    addMessage('system', '连接成功！');

                    // 自动发送登录认证
                    const loginMsg = {
                        type: 1,
                        token: token,
                        timestamp: Date.now()
                    };
                    ws.send(JSON.stringify(loginMsg));
                    addMessage('send', '发送登录认证', loginMsg);
                };

                ws.onmessage = function(event) {
                    const data = JSON.parse(event.data);
                    addMessage('receive', '收到消息', data);
                };

                ws.onclose = function() {
                    updateStatus(false);
                    addMessage('system', '连接已断开');
                };

                ws.onerror = function(error) {
                    addMessage('system', '连接错误: ' + error);
                };
            } catch (error) {
                alert('连接失败: ' + error);
            }
        }

        // 断开连接
        function disconnect() {
            if (ws) {
                ws.close();
                ws = null;
            }
        }

        // 发送消息
        function sendMessage() {
            if (!ws || ws.readyState !== WebSocket.OPEN) {
                alert('请先连接 WebSocket！');
                return;
            }

            const type = parseInt(document.getElementById('msgType').value);
            const senderId = parseInt(document.getElementById('senderId').value);
            const receiverId = parseInt(document.getElementById('receiverId').value);
            const groupId = parseInt(document.getElementById('groupId').value);
            const content = document.getElementById('content').value;

            const message = {
                type: type,
                msgId: 'msg_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9),
                senderId: senderId,
                contentType: 1,
                content: content,
                timestamp: Date.now()
            };

            if (type === 2) {
                message.receiverId = receiverId;
            } else if (type === 3) {
                message.groupId = groupId;
            }

            ws.send(JSON.stringify(message));
            addMessage('send', '发送消息', message);
        }

        // 发送心跳
        function sendHeartbeat() {
            if (!ws || ws.readyState !== WebSocket.OPEN) {
                alert('请先连接 WebSocket！');
                return;
            }

            const message = {
                type: 4,
                timestamp: Date.now()
            };

            ws.send(JSON.stringify(message));
            addMessage('send', '发送心跳', message);
        }

        // 更新连接状态
        function updateStatus(connected) {
            const statusEl = document.getElementById('status');
            if (connected) {
                statusEl.className = 'status connected';
                statusEl.textContent = '✅ 已连接';
            } else {
                statusEl.className = 'status disconnected';
                statusEl.textContent = '❌ 未连接';
            }
        }

        // 添加消息到列表
        function addMessage(type, title, data) {
            const messagesEl = document.getElementById('messages');
            const messageEl = document.createElement('div');
            messageEl.className = 'message ' + type;

            const time = new Date().toLocaleTimeString();
            const content = typeof data === 'object' ? JSON.stringify(data, null, 2) : data;

            messageEl.innerHTML = `
                <div class="message-time">[${time}] ${title}</div>
                <div class="message-content"><pre>${content}</pre></div>
            `;

            messagesEl.appendChild(messageEl);
            messagesEl.scrollTop = messagesEl.scrollHeight;
        }

        // 清空消息
        function clearMessages() {
            document.getElementById('messages').innerHTML = '';
        }
    </script>
</body>
</html>

